<template>
  <view class="my-wrapper">
    <image
      class="my-bg"
      src="https://ai-sbbs.xyz/api/profile/upload/2024/07/01/216ecf4ef90549a1b0d6b8cd648786f9.png"
      mode="scaleToFill"
    />

    <view class="my-content">
      <view class="user-info" @click="toUserInnfo">
        <view class="user-avatar">
          <image class="avatar" v-if="userInfo.userId" :src="userInfo.headImage" mode="scaleToFill" />
          <image
            class="avatar"
            v-if="!userInfo.userId"
            src="https://ai-sbbs.xyz/api/profile/upload/2024/07/06/5c47f7ef0c5e4da0ae4f3c1c573cbff4.jpg"
            mode="scaleToFill"
          />

          <!-- <image class="avatar" :src="userInfo.headImage" mode="scaleToFill" /> -->
        </view>
        <view class="user-desc" v-if="userInfo.userId">
          <view class="user-desc-top">{{userInfo.nickName}} [ {{userInfo.mobile}} ]</view>
          <view class="user-desc-bottom">
            <image class="user_level" src="../../static/imgs/user_level.png" mode="scaleToFill" />会员
          </view>
        </view>
        <view v-if="!userInfo.userId">去登录</view>
      </view>

      <UserInfo v-if="userInfo.userId" @toSave="initUserInfo" />
<!--      <tui-list-view backgroundColor="#fff" v-if="userInfo.userId">-->
<!--        <tui-list-cell arrow @click="goUserInfo">个人信息</tui-list-cell>-->
<!--      </tui-list-view>-->
      <!-- <view class="user-tool-list">
        <view class="tool-item" @click="handerClickdesc('04')">
          <view class="tool-item-left">
            <image class="tool-icon" src="../../static/imgs/消息@2x.png" mode="scaleToFill" />
            <text>系统信息</text>
          </view>
          <tui-icon name="arrowright" size="16" color="#666666"></tui-icon>
        </view>

        <view class="tool-item" @click="handerClickdesc('05')">
          <view class="tool-item-left">
            <image class="tool-icon" src="../../static/imgs/关于我们@2x.png" mode="scaleToFill" />
            <text>关于我们</text>
          </view>
          <tui-icon name="arrowright" size="16" color="#666666"></tui-icon>
        </view>
      </view> -->
    </view>

    <tui-toast ref="toast"></tui-toast>
  </view>
</template>

<script>
import { commonStorage } from "@/utils/common.js";
import { loginWechatApi, loginGetPhoneNumberApi } from "@/apis/user";
import shareSdk from '@/utils/share.js'
import UserInfo from "@/components/userInfo/userInfo.vue";

export default {
  mixins:[shareSdk],
components:{UserInfo},
  data() {
    return {
      userInfo: {
        headImage: "",
        gender: 1, // 0女  1男
        birthPlace: "",
        birthDate: "",
        mobile: "",
        nickName: "",
        userName: ""
      }
    };
  },

  onLoad() {},
  onShow() {
    this.initUserInfo();
  },
  methods: {
    handerClickdesc(flag) {
      if (!this.userInfo.userId) {
        return uni.navigateTo({ url: "/pages/login/login" });
      }

      uni.navigateTo({
        url: "/pqgeInfo/protocols/protocols?type=" + flag
      });
    },
    handerClick() {
      let params = {
        title: "功能开发中..."
      };
      this.$refs.toast && this.$refs.toast.show(params);
    },
    // 获取用户信息
    async initUserInfo() {
      let mobile = commonStorage.getStorageSync("mobile");
      if (!mobile) {
        const userInfo = commonStorage.getStorageSync("userInfo");
        if (userInfo) {
          mobile = JSON.parse(userInfo).mobile || '';

        }

      }
      //
      // if (mobile) {
        let { code, data } = await loginWechatApi({
          mobile: mobile
        });
        if (code == 1) {
          this.userInfo = data.userVO;
          commonStorage.setStorage("userInfo", JSON.stringify(data.userVO));
        }
      // } else {
        // wx.miniProgram.navigateTo({
        //   url: "/pages/login/login?flag=1",
        //   success: function(res) {
        //     console.log(res, "success");
        //   },
        //   fail: function(res) {
        //     console.log(res, "fail");
        //   }
        // });
      // }
    },
    toUserInnfo() {
      if (!this.userInfo.userId) {
        return uni.navigateTo({ url: "/pages/login/login?flag=1" });
        // wx.miniProgram.navigateTo({
        //   url: "/pages/login/login?flag=1",
        //   success: function(res) {
        //     console.log(res, "success");
        //   },
        //   fail: function(res) {
        //     console.log(res, "fail");
        //   }
        // });
      } else {

      }
    },
    goUserInfo(){
      uni.navigateTo({
        url: "/pqgeInfo/userInfo/userInfo"
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.my-wrapper {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  background: #f6f6f6;
  min-height: 100vh;
  padding-bottom: 20rpx;
  .my-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
  }

  .my-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding: 12px;
    position: relative;
    z-index: 2;
    .user-info {
      background: rgba(255, 255, 255, 0.7);
      opacity: 0.72;
      border-radius: 4px 4px 4px 4px;
      padding: 20px 12px;
      display: flex;
      align-items: center;
      margin-bottom: 12px;
      .user-avatar {
        flex: 0 0 70px;
        height: 70px;
        margin-right: 12px;
        .avatar {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .user-desc {
        .user-desc-top {
          padding: 4px 0;
          font-size: 16px;
          color: #333333;
        }
        .user-desc-bottom {
          padding: 4px 0;
          font-size: 12px;
          display: flex;
          align-items: center;
          color: #333333;
          .user_level {
            width: 16px;
            height: 16px;
            margin-right: 4px;
          }
        }
      }
    }
    .user-tool-list {
      // background: rgba(255, 255, 255, 0.7);
      border-radius: 4px 4px 4px 4px;
      .tool-item {
        padding: 14px;
        display: flex;
        align-content: center;
        justify-content: space-between;
        color: #666;
        font-size: 14px;
        .tool-item-left {
          display: flex;
          align-content: center;
          align-items: center;
          .tool-icon {
            width: 17px;
            height: 17px;
            margin-right: 22px;
          }
        }
      }
    }
  }
}
</style>
